<template>
  <div class="index ">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin">任务管理</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/renwuexcel">数据报表</router-link>
              <router-link class="powertopli teamlei" to="/callsystem/newcalls/guanlizhongxin/peoexcel">人员报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/yingxiaoexcel">营销任务报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/addpeo">外呼人员管理</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/addphone">外呼号码管理</router-link>
            </div>
          </div>
        </div>
        <div class="con" style="border-bottom: 10px solid #F4F4F4;padding-bottom: 15px;">
          <div  class="t_search_box" style="padding-bottom: 0;">
            <!-- <el-input style="width: 240px;" class="t_search_input" v-model.trim="formInline.user_name" placeholder="请输入人员名称"></el-input> -->
            <el-select multiple v-model="formInline.users" placeholder="请选择">
              <el-option
              style="width: 240px;" class="t_search_input"
                v-for="item in peolist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button type="danger" style="margin-left: 10px;" @click="clearbtn" plain round >清空</el-button>
            <el-button type="danger" style="background-color: #2974FF;" @click="searchbtn" round >搜索</el-button>
          </div>
        </div>

        <div class="con" style="padding-top: 30px;">


          <div class="t_top_btn_box">
            <div class="t_btn_date_box">
              <div @click="settime(1)" style="cursor: pointer;" class="t_btn_date" :class="[settimetype==1?'t_btn_date_lei':'']">今天</div>
              <div @click="settime(2)" style="cursor: pointer;" class="t_btn_date" :class="[settimetype==2?'t_btn_date_lei':'']">昨天</div>
              <div @click="settime(3)" style="cursor: pointer;" class="t_btn_date" :class="[settimetype==3?'t_btn_date_lei':'']">近一周</div>
              <div class="t_btn_date" style="padding-top: 0;padding-bottom: 0;">选择日期
                <el-date-picker @change="changedate" v-model="times" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
              </div>
            </div>
            <el-button @click="downlinkall" type="primary" round plain>下载全部人员表</el-button>
          </div>
          <div>
            <el-table
              v-loading='loading'
              :header-cell-style="{
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              @expand-change="onExpanTable"
              :expand-row-keys="expandedRowKeys"
              :row-key="row => row.id"
              style="width: 100%;margin-top: 20px;">
              <!-- <el-table-column type="expand">
                <template slot-scope="props">

                  <div class="t_peo_del_line" v-for="(item,index) in props.row.peodetail " :key="index">
                    <div  >{{item.user_name}}</div>
                    <div  >{{item.called_amount}}</div>
                    <div  >{{item.called_ok}}</div>
                    <div  >{{item.sms_num}}</div>
                    <div  >{{item.callpass}}%</div>
                    <div  >{{item.callavg}}</div>
                    <div  >{{item.success_amount}}</div>
                    <div  >{{item.callsuccess}}%</div>
                    <el-button @click="todetail(item.id)" type="text" >查看详情</el-button>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column
                label="人员名称"
                prop="name"
                align="center">
              </el-table-column>
              <el-table-column
                label="拨打数量"
                prop="call_count"
                align="center">
              </el-table-column>
              <el-table-column
                label="拨通数量"
                prop="call_ok_count"
                align="center">
              </el-table-column>
              <el-table-column
                label="标签接通数量"
                prop="sign_ok_count"
                align="center">
              </el-table-column>
              <el-table-column
                label="平均通话时长"
                prop="avg_time"
                align="center">
              </el-table-column>
              <el-table-column
                label="目标达成率"
                prop="achieve_percent"
                align="center">
                <template slot-scope="scope">
                  {{ scope.row.achieve_percent }}%
                </template>
              </el-table-column>
              <el-table-column
                label="标签接通率"
                prop="sign_ok_percent"
                align="center">
                <template slot-scope="scope">
                  {{ scope.row.sign_ok_percent }}%
                </template>
              </el-table-column>
              <el-table-column
                prop="remark" width="300px"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.id">
                    <el-button type="text" @click="opentagp(scope.row.id)" >意向分布</el-button>
                    <el-button @click="downlink(scope.row.id)" style="margin-left: 10px;" type="text" >下载明细</el-button>
                    <el-button style="margin-left: 10px;" type="text" @click="todetail(scope.row.id,scope.row.name)" >查看详情</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
<!--
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="formInline.pageSize"
                layout="total,prev, pager, next"
                :total="total"
                prev-text="上一页" next-text="下一页">
              </el-pagination>
            </div>
 -->
          </div>
        </div>
      </div>
    </div>
    <!-- 意向分布 -->
    <el-dialog
      title="意向标签分布"
      :visible.sync="isshowtagp"
      width="1100px">
      <el-table
        :header-cell-style="{
        background:'#F4F4F4',
        color:'#7D8087'}"
          :data="tagData"
          style="width: 100%;margin-top: 20px;">
          <el-table-column
            prop="name"
            align="center"
            label="标签">
          </el-table-column>
          <el-table-column
            prop="active_count"
            align="center"
            label="激活数量">
          </el-table-column>
          <el-table-column
            prop="active_percent"
            align="center"
            label="激活率">
            <template slot-scope="scope">
                  {{ scope.row.active_percent }}%
                </template>
          </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 30px;">
        <el-button type="primary" @click="isshowtagp = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";


  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,

    },
    name: 'quanyi',
    data() {
      return {

        shopid:'',
        formInline:{

          page:1,
          pageSize:20,
          users:''
        },
        tableData: [],
        total:0,
        loading:false,
        isshowtagp:false,
        tagData:[],
        todey:'',
        yesterday:'',
        week:[],
        times:[],
        settimetype:'',
        expandedRowKeys:[],
        peolist:[]
      }
    },
    created() {
      const start = new Date();

      const end = this.getCurrentTime();
      this.times=[this.timestampToTime(start.getTime() - 3600 * 1000 * 24 * 7),end]
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()
      //人员
      this.getallpeo()

    },
    methods: {
      getallpeo(){
        axios.get('/api/plan-market/call/all/caller/list/v2')
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('人员')
              console.log(response.data.data)
             this.peolist = response.data.data

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){

        console.log(this.todey)
        console.log(this.yesterday)
        console.log(this.week)
        console.log(this.times)


        var start_time = ''
        var end_time = ''
        var time_type = ''
        if(this.settimetype==1){
          time_type = 1
        }else if(this.settimetype==2){
          time_type = 2
        }else if(this.settimetype==3){
          start_time = this.week[0]
          end_time = this.week[1]
        }else{
          start_time = this.times[0]
          end_time = this.times[1]
        }



        this.loading = true
        axios.get('/api/plan-market/job/call/list/v2',{
          params:{

            // page:this.formInline.page,
            // page_size:this.formInline.pageSize,
            start:start_time,
            end:end_time,
            time_type:time_type,
            users:this.formInline.users.toString()
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              for(let i in this.tableData){
                this.tableData[i].slide = false
                if(this.tableData[i].called_ok == null){
                  this.tableData[i].called_ok = 0
                }
                if(this.tableData[i].logs_count == null){
                  this.tableData[i].logs_count = 0
                }

                if(this.tableData[i].success_amount == null){
                  this.tableData[i].success_amount = 0
                }
                this.tableData[i].callpass = this.tableData[i].called_amount ? Math.round(this.tableData[i].called_ok/this.tableData[i].called_amount*100) : 0
                this.tableData[i].callavg = this.tableData[i].called_ok ? Math.round(this.tableData[i].logs_count/this.tableData[i].called_ok) : 0
                this.tableData[i].callsuccess = this.tableData[i].called_ok ? Math.round(this.tableData[i].success_amount/this.tableData[i].called_ok*100) : 0

              }

            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading=false
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
      daochu:function(type){

        // window.location.href = '/storage/exports/20231010170342店铺50481全量领取权益导出订单.csv'
        axios.post('/api/plan-market/goods/gift/record/export',{
          is_all:type
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log(response.data.data)
              window.location.href = response.data.data

              // console.log('http://118.190.155.55'+response.data.data)

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      opentagp(id){
        this.isshowtagp = true
        var start_time = ''
        var end_time = ''
        var time_type = ''
        if(this.settimetype==1){
          time_type = 1
        }else if(this.settimetype==2){
          time_type = 2
        }else if(this.settimetype==3){
          start_time = this.week[0]
          end_time = this.week[1]
        }else{
          start_time = this.times[0]
          end_time = this.times[1]
        }
        axios.get('/api/plan-market/shop/call/label/list/v2',{
          params:{

            user_id:id,
            start:start_time,
            end:end_time,
            time_type:time_type
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('意向')
              console.log(response)
             this.tagData = response.data.data

            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading=false
          })
      },
      settime(type){
        this.settimetype = type
        //1今天
        //2昨天
        //3近一周

        if(type==1){
          this.todey=this.getCurrentTime()
          this.yesterday=''
          this.week=[]
        }
        if(type==2){
          const date = new Date();
          this.todey=''
          this.yesterday=this.timestampToTime(date.getTime() - 3600 * 1000 * 24)
          this.week=[]
        }
        if(type==3){

          const start = new Date();
          this.timestampToTime(start.getTime() - 3600 * 1000 * 24 * 7)

          const end = this.getCurrentTime();


          this.todey=''
          this.yesterday=''
          this.week=[this.timestampToTime(start.getTime() - 3600 * 1000 * 24 * 7),end]
        }

        this.times=[]

        this.getlist()


      },
      changedate(val){
          this.settimetype = ''
          this.todey=''
          this.yesterday=''
          this.week=[]
          if(!val){
            const start = new Date();
            const end = this.getCurrentTime();
            this.times=[this.timestampToTime(start.getTime() - 3600 * 1000 * 24 * 30),end]
          }
          this.getlist()
      },




      //中国标准时间转化
      getCurrentTime () {
        let date = new Date()
        var year = date.getFullYear() //返回指定日期的年份
        var month = this.repair(date.getMonth() + 1);//月
        var day = this.repair(date.getDate());//日
        var hour = this.repair(date.getHours());//时
        var minute = this.repair(date.getMinutes());//分
        var second = this.repair(date.getSeconds());//秒

        //当前时间
        var curTime = year + "-" + month + "-" + day
            + " " + hour + ":" + minute + ":" + second;
        // console.log(curTime)
        //返回 2022-11-25 11:23:26
        return curTime;
      },
      //补0
      repair(i){
        if (i >= 0 && i <= 9) {
          return "0" + i;
        } else {
          return i;
        }
      },
      timestampToTime(timestamp){
          // 时间戳为10位需*1000，时间戳为13位不需乘1000
          // var date = new Date(timestamp * 1000);
          var date = new Date(timestamp);
          let Y = date.getFullYear() + "-"; //年
            let M =
              (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-"; // 月
            let D =
              (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; //日
            let h =
              (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"; //时
            let m =
              (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
              ":"; //分
            let s =
              date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒
            return Y + M + D + h + m + s;
      },
      onExpanTable(row,expanded){
       console.log(row,expanded);
       let data = new FormData()
            data.id = row.id
            data.is_leader = 1
            axios.get('/api/plan-market/job/call/list', {params:data})
              .then(response => {
                if(response.data.msg.code == 0){
                  var peodetail = response.data.data.data
                  for(let i in peodetail){
                    if(peodetail[i].called_ok == null){
                      peodetail[i].called_ok = 0
                    }
                    if(peodetail[i].logs_count == null){
                      peodetail[i].logs_count = 0
                    }

                    if(peodetail[i].success_amount == null){
                      peodetail[i].success_amount = 0
                    }
                    peodetail[i].callpass = peodetail[i].called_amount ? Math.round(peodetail[i].called_ok/peodetail[i].called_amount*100) : 0
                    peodetail[i].callavg = peodetail[i].called_ok ? Math.round(peodetail[i].logs_count/peodetail[i].called_ok) : 0
                    peodetail[i].callsuccess = peodetail[i].called_ok ? Math.round(peodetail[i].success_amount/peodetail[i].called_ok*100) : 0


                  }

                  for(var x = 0;x<this.tableData.length;x++){
                    if(this.tableData[x].id == row.id){
                      this.$set(this.tableData[x],'peodetail',peodetail)
                    }
                  }

                  // 控制展开行
                  this.expandedRowKeys = expanded.map(val => val.id);

                  console.log('detail')
                  console.log(this.tableData)
                }else{
                  this.$message.error(response.data.msg.info);
                }
            })
      },
      todetail(id,name){
        var start_time = ''
        var end_time = ''
        if(this.settimetype==3){
          start_time = this.week[0]
          end_time = this.week[1]
        }else{
          start_time = this.times[0]
          end_time = this.times[1]
        }

        // this.$router.push({path:'/callsystem/newcalls/guanlizhongxin/peoexceldet',query:{
        //   id:id,
        //   settimetype:this.settimetype,
        //   start_time:start_time,
        //   end_time:end_time,
        //   name:name,
        //   todey:this.todey,
        //   yesterday:this.yesterday,

        // }})

        window.open(window.location.origin +  window.location.pathname+"#/callsystem/newcalls/guanlizhongxin/peoexceldet?id="+id+"&settimetype="+this.settimetype+"&start_time="+start_time+"&end_time="+end_time+"&name="+name+"&todey="+this.todey+"&yesterday="+this.yesterday)


      },
      downlink(id){

        var start_time = ''
        var end_time = ''
        var time_type = ''
        if(this.settimetype==1){
          time_type = 1
        }else if(this.settimetype==2){
          time_type = 2
        }else if(this.settimetype==3){
          start_time = this.week[0]
          end_time = this.week[1]
        }else{
          start_time = this.times[0]
          end_time = this.times[1]
        }

        axios.get('/api/plan-market/call/detail/export/v2',{
          params:{

            user_id:id,
            start:start_time,
            end:end_time,
            time_type:time_type
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {

              console.log(response)
              // this.$router.push({path:'/order_export_waihuyeji'})
              window.open(window.location.origin +  window.location.pathname+"#/order_export_waihuyeji")
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      downlinkall(){

        var start_time = ''
        var end_time = ''
        var time_type = ''
        if(this.settimetype==1){
          time_type = 1
        }else if(this.settimetype==2){
          time_type = 2
        }else if(this.settimetype==3){
          start_time = this.week[0]
          end_time = this.week[1]
        }else{
          start_time = this.times[0]
          end_time = this.times[1]
        }

        axios.get('/api/plan-market/call/order/total_data/export/v2',{
          params:{
            users:this.formInline.users.toString(),
            start:start_time,
            end:end_time,
            time_type:time_type
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {

              console.log(response)
              this.$router.push({path:'/order_export_waihuyeji'})
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        },
      clearbtn(){
        this.formInline.users = ''
      }






    },
    beforeDestroy(){

    },


  }
</script>

<style  scoped>
    .team .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .team .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
      padding-top: 0;
    }
    .team .teamlei {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #f4f4f4;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;

    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#f4f4f4 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line2{

      background-color:white ;

    }
    .t_under_line_lei{

      background-color:#2974FF ;

    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    .t_search_box{
      padding-bottom: 20px;
    }
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;

    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}
    .fenline{
      background-color: #f4f4f4;
      height: 10px;
    }
    .el-button--danger:hover{
      background-color: #2974FF;
    }
    .t_top_btn_box{
      display: flex;
      justify-content: space-between;
    }
    .t_btn_date_box{
      display: flex;
    }
    .t_btn_date{
      margin-right: 20px;
      background-color: #F3F5F8;
      color: #666666;
      border-radius: 30px;
      padding: 10px 30px;
      font-size: 14px;

    }
    /deep/.t_btn_date_box .el-input__inner{
      border: none;
      background-color:#F3F5F8 ;
    }
    /deep/.t_btn_date_box .el-range-input{
      background-color:#F3F5F8 ;
    }
    .t_btn_date_lei{
      background-color: #F1F8FF;
      color:white
    }
    .t_peo_del_line{
      display: flex;
    }
</style>
